<template>
  <CellGroup title="卡券列表">
    <ul class="oder-list-container"
      v-for="(item, index) in list" :key="index">
      <li class="oder-item">
        <span class="key">卡券子订单号：</span>
        <span
          class="value">{{ item.orderNo }}</span>
      </li>
      <li class="oder-item">
        <span class="key">卡券：</span>
        <span
          class="value">{{ item.cardSn }}</span>
      </li>
      <li class="oder-item">
        <span class="key">面值：</span>
        <span
          class="value">{{ item.cardFacevalue }}</span>
      </li>
      <li class="oder-item">
        <span class="key">费率：</span>
        <span
          class="value">{{ item.cardInfo.recycleRate }}</span>
      </li>
      <li class="oder-item">
        <span class="key">创建时间：</span>
        <span
          class="value">{{ item.createTime }}</span>
      </li>
      <li class="oder-item">
        <span class="key">结束时间：</span>
        <span
          class="value">{{ item.updateTime }}</span>
      </li>
      <li class="footer">
        <Tag
          v-if="item.status === OrderDetailStatusType.成功
            || item.status === OrderDetailStatusType.处理中"
          :type="item.status === OrderDetailStatusType.成功 ? 'success' : 'warning'">
          {{ item.cardInfo.status }}
        </Tag>
        <Tag v-else type="danger" plain>
          {{ item.cardInfo.status }}</Tag>
        <span class="value"
          style="margin-left: auto;">{{ '￥' + (item.actualAmount).toFixed(2) }}</span>
      </li>
    </ul>
  </CellGroup>
</template>
<script setup lang="ts">
import { CellGroup, Tag } from 'vant';
import type { PropType } from 'vue';

import { OrderDetailStatusType } from '../const';
import type { CardOrderDetailVoItem } from '../models/CardOrderItem';

defineProps({
  list: {
    type: Array as PropType<CardOrderDetailVoItem[]>,
    default: () => [],
  },
});
</script>
<style lang="less" scoped>
.oder-list-container {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  .oder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    gap: 3px;

    .key {
      color: var(--van-cell-value-color);
    }
  }

  .footer {
    display: flex;
    align-items: center;
    font-size: 12px;

    .value {
      margin-left: auto;
      color: var(--van-danger-color);
    }
  }
}
</style>
